<template>
	<gracePage headerBG="#F4F4F4" class="main-bodybg-color" :bounding="false">
    <view slot="gHeader">
			<view class="grace-header-body grace-relative main-bodybg-color">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 font-size-36 text-center" style="font-size:36rpx;">提现</text></view>
				<!-- 消息按钮 -->
				<!-- #ifdef APP-PLUS -->
					<view class="grace-header-icons font-size-24 " @click="toNavigateTo('/pages/homeBox/bindAccount/bindAccount')">账号</view>
				<!-- #endif -->
				<!-- #ifdef MP -->
					<view class="grace-header-icons "></view>
				<!-- #endif -->
			</view>
		</view>
		<view slot="gBody" class="m-3">
        <view class="grace-bg-white p-4 grace-border-radius-small">
			<view class="grace-list-title">
				<text class="">提现方式</text>
				<text class="grace-list-title-desc main-font-color"  @click="toNavigateTo('/pages/homeBox/bindAccount/bindAccount')">切换账号</text>
			</view>
			<view class="grace-space-between pt-2">
				<view class="grace-flex-center grace-flex-vcenter" :class="{'bg-active': payListNum == index}" style=" width: 282rpx;height: 88rpx;" v-for="(item, index) in payLists" :key="index"> 
					<image :src="item.icon" style="width: 46rpx;height: 46rpx;"></image>
					<text class="pl-1">{{item.text}}</text>
				</view>
			</view>
			<view class="pt-3">
				<text>提现金额：</text>
			</view>
			<view class="grace-list-items grace-border-b">
				<view class="grace-list-body grace-flex grace-flex-vcenter" @tap="showKeyboard">
					<view class="grace-h4">￥</view>
					<view @tap="showKeyboard">
						<input type="text" class="grace-form-input text-left grace-h3" style="font-size: 42rpx;height: 80rpx;" :value="numberVal" disabled placeholder="请输入提现金额"></input>
					</view>
				</view>
				<text class="grace-list-arrow-right main-font-color width-150" @click="allMoney">全部提现</text>
			</view>
			<view class="grace-list-items grace-black6 pt-2 ">
				<text class="grace-relative width-170">可提现金额：</text>
				<view class="grace-list-body p-0">
					<view class="grace-list-title">
						<text>{{userInfo.user_money}}元</text>
					</view>
				</view>
				<!-- <text class="grace-list-arrow-right grace-icons icon-help1"></text> -->
			</view >
			<view class="grace-list-items grace-black6 grace-text">
				<text class="grace-relative width-170">手续费：</text>
				<view class="grace-list-body p-0">
					<view class="grace-list-title">
						<text class="grace-text">{{userInfo.withdraw_charge}}元</text>
					</view>
				</view>
				<!-- <text class="grace-list-arrow-right grace-icons icon-help1"></text> -->
			</view >
			<view class="grace-list-items grace-black6 grace-text">
				<text class="grace-relative width-170">提现税率：</text>
				<view class="grace-list-body p-0">
					<view class="grace-list-title">
						<text class="grace-text">{{userInfo.withdraw_rate}}</text>
					</view>
				</view>
				<!-- <text class="grace-list-arrow-right grace-icons icon-help1"></text> -->
			</view >
			<view class="grace-list-items grace-black6 grace-text">
				<text class="grace-relative width-170">预计到账：</text>
				<view class="grace-list-body p-0">
					<view class="grace-list-title">
						<text class="grace-text">{{numberVal1 || ''}}</text>
					</view>
				</view>
				<!-- <text class="grace-list-arrow-right grace-icons icon-help1"></text> -->
			</view >
		</view>
			<view class="mx-3 mt-4">
				<button type="primary" class="grace-button" :disabled="disabled" @click="gotoPay">确认提现</button>
			</view>
			<graceNumberKeyboard 
				:show="graceNumberKeyboardShow" 
				:showInputRes="false"
				v-on:keyboardDone="keyboardDone" 
				v-on:keyboardInput="keyboardInput" 
				v-on:keyboardDelete="keyboardDelete">
			</graceNumberKeyboard>
			<graceDialog ref="graceDialog1" :title="DialogTitle" :isBtns="false" v-on:closeDialog="closeDialog1">
				<view class="content1" slot="content">
					<form @submit="formSubmit" class="grace-form grace-margin-top">
						<view class="mx-1">
							<view class="grace-form-item">
								<view class="grace-pnper text-center">
									<text class="grace-form-label">姓名</text>
								</view>
								<view class="grace-form-body">
									<input type="text" v-model="inputName" class="grace-form-input text-left my-0" name="inputName" placeholder="请输入姓名" />
								</view>
								<view style="width:200rpx; margin-left:30rpx;">
								</view>
							</view>
							<view class="grace-form-item">
								<view class="grace-pnper text-center">
									<text class="grace-form-label">账号</text>
								</view>
								<view class="grace-form-body">
									<input type="number" v-model="inputNumber" class="grace-form-input text-left my-0" name="inputNumber" placeholder="请输入绑定账号" />
								</view>
								<view style="width:200rpx; margin-left:30rpx;">
								</view>
							</view>
						</view>
						<view class="pt-2">
							<button formType="submit" type="primary" class="grace-button">提交</button>
						</view>
					</form>
				</view>
			
			</graceDialog>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "@/graceUI/components/gracePage.vue";
import graceNumberKeyboard from "@/graceUI/components/graceNumberKeyboard.vue";
import graceDialog from '@/graceUI/components/graceDialog.vue';
import tools from '@/common/js/tools.js';
import { mapState , mapActions} from 'vuex';
export default {
    data() {
		return {
			graceNumberKeyboardShow : false,
			numberVal : '',
			numberVal1 : '',
            oneGoStatus:true,
			disabled:false,
			payListNum:1,
			inputName: '',
			inputNumber: '',
			DialogTitle: '',
			payLists: [
				{
					text: '微信',
					icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
					name: 'wechat_app',
					provider: 'wxpay'
				},
				{
					text: '支付宝',
					icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
					name: 'alipay',
					provider: 'alipay'
				}
			],
			userMoney:0
		};
    },
    computed: {
		...mapState({
			userInfo: state => state.user.userInfo
		})
	},
	onLoad:function(){
		this.userMoney = this.userInfo.user_money;
	},
	methods:{
		...mapActions(['getUserInfo']),
		showDialog1  : function(){this.$refs.graceDialog1.open();},
		closeDialog1 : function(){this.$refs.graceDialog1.hide();},
        toNavigateTo(url){
			if(this.oneGoStatus){
				this.oneGoStatus = false;
				uni.navigateTo({
					url: url,
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		},
		gotoExtract(){
			
		},
		gotoPay(){
			console.log('userInfo',this.userInfo)
			// 首先验证他是否有绑定支付宝账号
			if(!this.userInfo.alipay_id){
				this.DialogTitle = '绑定'+this.payLists[this.payListNum].text+'账号';
				this.showDialog1();
			}
			console.log('numberVal',this.numberVal)
			if(this.numberVal == ''){
				return uni.showToast({
					title: '请输入金额',
					icon: 'none'
				});
			}
			
			
			let options = {
				act:'withdraw',
				amount:this.numberVal,
			}
			this.$HTTP.postStatus('/api/api.php', options, { token: true }).then(res=>{
				console.log('res',res)
				if(res.result == 1002){
					// 获取用户信息
					this.getUserInfo();
					uni.$emit("extractAmount");
				}
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			})
		},
		showKeyboard : function () {
			//打开数字键盘
			this.graceNumberKeyboardShow = true;
		},
		allMoney(){
			this.numberVal = this.userMoney;
		},
		// 监听输入
		keyboardInput : function(e){
			let num = (this.numberVal + '' + e ).match(/^\d+(?:\.\d{0,2})?/)[0];
			if(parseFloat(num) > parseFloat(this.userMoney)){
				this.numberVal = this.userMoney;
			}else{
				this.numberVal = num;
			}
		},
		// 监听删除
		keyboardDelete : function(){
			this.numberVal = this.numberVal.substring(0, this.numberVal.length - 1);
		},
		// 完成事件
		keyboardDone : function(){
			// 计算最终价格
			if(this.numberVal == '') return;
			if(parseFloat(this.numberVal) < 5 ) this.numberVal = 5;
			let num = parseFloat(this.numberVal),huilu = parseFloat(this.userInfo.withdraw_rate);
			var num1 = tools.accMul(num,huilu);
			
			this.numberVal1 = (tools.accSub(num,num1) - 3).toFixed(2);
			this.graceNumberKeyboardShow = false;
		},
		formSubmit : function(e){
			var info = e.detail.value;
			if(info.inputName == '' || info.inputNumber == '') return;
			this.bindingPay(e.detail.value);
		},
		// 绑定支付宝
		bindingPay(e){
			let opt = {
				act:'edit_alipay',
				alipay_id:e.inputName,
				alipay_name:e.inputNumber,
			}
			this.$HTTP.postStatus('/api/api.php', opt, { token: true }).then(res=>{
				if(res.result == 1002){
					this.closeDialog1();
					// 获取用户信息
					this.getUserInfo();
				}
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			})
		},
		
	},
	components:{gracePage, graceNumberKeyboard ,graceDialog}
}
</script>
<style scoped>
	.width-170{
		width: 170rpx;
	}
	.bg-active{
		background: url(/static/images/select_pay.png);background-size: 100%;
	}
</style>